<template>
  <el-button style="margin-bottom: 10px" type="primary" @click="handleAdd"
    >添加{{ newstypeName }}</el-button
  >
  <div>
    <tableBody
      ref="table"
      :tableConfig="tableConfig"
      :queryApi="queryApi"
      :isOperate="true"
      :operateWidth="150"
    >
      <template v-slot:operate="slotProps">
        <el-button
          size="small"
          type="warning"
          @click="handleUpd(slotProps.scope.row)"
          >修改</el-button
        >
        <el-button
          size="small"
          @click="handleDel(slotProps.scope.row)"
          type="danger"
          >删除</el-button
        >
      </template>
    </tableBody>
    <el-dialog
      v-model="updFormVisible"
      :title="updFormTitle"
      width="500"
      center
    >
      <el-form size="small" :model="formData" label-width="60px">
        <el-form-item :label="`${newstypeName}标题`">
          <el-input v-model="formData.newtitle" clearable />
        </el-form-item>
        <el-form-item :label="`${newstypeName}内容`">
          <el-input type="textarea" v-model="formData.newscontent" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveEdit()">修改</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import tableList from "../utils/tableBody";
import tableBody from "./tableBody.vue";
import { onMounted, onBeforeMount, reactive, ref, watch } from "vue";
import { updNews, delNews, addNews } from "../api/news";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter, useRoute } from "vue-router";
import { CODE } from "@/utils/StatusCode";

const path = useRoute().path;
let tableConfig: any;
const queryApi = ref("/news/newsList");

let newstype: number;
let newstypeName: string;
onBeforeMount(() => {
  if (path == "/backNews") {
    tableConfig = reactive(tableList.newsList);
    newstype = 1;
    newstypeName = "新闻";
  } else {
    tableConfig = reactive(tableList.noticeList);
    newstype = 2;
    newstypeName = "公告";
  }
});
onMounted(() => {
  query({ newstype: newstype });
});
const table = ref(null);
function query(data: any) {
  (table as any).value.onSearch(data);
}
// 修改
const formData = reactive({
  newsid: 0,
  newtitle: "",
  newstype: 0,
  newstime: "",
  newscontent: "",
});
const updFormVisible = ref(false);
let updFormTitle = "";
function handleUpd(row: any) {
  Object.keys(formData).forEach((fieId) => {
    formData[fieId] = row[fieId];
  });

  updFormVisible.value = true;
  updFormTitle = "修改" + newstypeName;
}
// 清空表单
function resetForm() {
  Object.keys(formData).forEach((fieId) => {
    formData[fieId] = "";
  });
}
// 新增
function handleAdd() {
  resetForm();
  updFormVisible.value = true;
  updFormTitle = "新增" + newstypeName;
  formData.newstype = newstype;

}
// 保存
async function saveEdit() {
  let res;
  if (formData.newsid) {
    res = await updNews(formData);
  } else {
    res = await addNews(formData);
  }
  if (res.code == CODE.OK) {
    updFormVisible.value = false;
  }
  prompt(res);
}
function prompt(res: any) {
  if (res.code == CODE.OK) {
    ElMessage({
      message: res.message,
      type: "success",
    });
    query({ newstype: newstype });
  } else {
    ElMessage({
      message: res.message,
      type: "error",
    });
  }
}
// 删除
function handleDel(row: any) {
  if (!row.newsid) return;
  ElMessageBox.confirm("是否删除此" + newstypeName, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      const res = await delNews({
        newsid: row.newsid,
      });
      prompt(res);
    })
    .catch(() => {});
}
</script>

<style lang="less" scoped></style>
